<template>
  <view>
    <m-top :autoBack="false" :bgChangeByScroll="false" bgColor="transparent" @getHeight="getGlHeight">
      <view class="c333 font32 fw500">活动中心</view>
    </m-top>

    <m-container :top="0" v-if="glTop">
      <u-sticky zIndex="8" :offsetTop="0" :customNavHeight="0">
        <view
          class="pdv40 liner-header"
          :style="{
            'padding-top': glPdt + 'px',
          }"
        >
          <view class="tabs">
            <m-tabs :list="tabs" :current="tabIndex" @change="(e) => (tabIndex = e.index)"></m-tabs>
          </view>

          <!--  -->
          <view class="filter mgt40 flex align-center c333 font28" v-if="false">
            <view
              class="filter-item flex align-center"
              @click="showPickHandler(item)"
              v-for="(item, index) in filters"
              :key="index"
            >
              <view>{{ viewFilter(item) }}</view>
              <view v-if="item.arrow !== false">
                <u-icon name="arrow-down" size="28rpx" color="#333333"></u-icon>
              </view>
            </view>
          </view>
        </view>
      </u-sticky>
      <view class="mgt32 pdv40">
        <!--  -->
        <view class="card mgt40">
          <template v-if="!empty">
            <view class="card-item" v-for="(item, index) in list" :key="index">
              <panel-item :option="item" :pass="tabIndex !== 0"></panel-item>
            </view>

            <u-loadmore :status="loadingStatus"></u-loadmore>
          </template>
          <view v-else style="margin-top: 100rpx">
            <m-empty></m-empty>
          </view>
        </view>
      </view>
    </m-container>

    <u-picker
      :show="show"
      :columns="[columnList]"
      :closeOnClickOverlay="true"
      keyName="label"
      @cancel="show = false"
      @close="show = false"
    ></u-picker>

    <!-- 省市区联动 -->
    <u-picker
      :show="showAreaPick"
      :columns="currentAreaPick"
      keyName="label"
      @cancel="showAreaPick = false"
      @change="changeAreaHandler"
      @confirm="areaPickSubmit"
    ></u-picker>

    <m-tabbar path="pages/activity/index"></m-tabbar>
  </view>
</template>

<script>
import GlTopMixin from "@/mixins/global-top";
import PanelItem from "./components/card-item.vue";
import PaginationMixin from "@/mixins/pagination.js";
import AreaPickMixin from "@/mixins/modules/areaPick.js";
import { getMettingListApi } from "@/api/modules/homepage.js";

export default {
  mixins: [GlTopMixin, PaginationMixin, AreaPickMixin],
  components: {
    PanelItem,
  },
  data() {
    return {
      queryApi: getMettingListApi,
      show: false,
      pickKey: "city",
      keyword: "",
      tabIndex: 0,
      columnList: [],
      tabs: [
        {
          name: "最新活动",
        },
        {
          name: "往期回顾",
        },
      ],
      viewers: {}, // 用于选择的枚举显示库
      queryParams: {
        is_old: 0,
        tmi_prov_id: "",
      },
    };
  },

  computed: {
    filters() {
      if (this.tabIndex === 0) {
        return [
          {
            key: "type",
            label: "类型",
            list: [
              {
                label: "类型",
                id: 2021,
              },
            ],
          },
          {
            label: "城市",
            type: "city",
            key: "city",
            list: [
              {
                label: "城市1",
                id: 2021,
              },
            ],
          },
          {
            key: "near",
            label: "近期",
            list: [
              {
                label: "近期",
                id: 2021,
              },
            ],
          },
        ];
      }
      return [
        {
          key: "type1",
          label: "类型",
          list: [
            {
              label: "类型",
              id: 2021,
            },
          ],
        },
        {
          key: "near1",
          label: "近期",
          list: [
            {
              label: "近期1",
              id: 2021,
            },
          ],
        },
        {
          label: "仅看回放",
          arrow: false,
          list: [
            {
              label: "近期",
              id: 2021,
            },
          ],
        },
      ];
    },
    // list() {

    //   return map[this.pickKey];
    // },
  },

  watch: {
    tabIndex() {
      this.queryParams.is_old = this.tabIndex;
      this.getList(true);
    },
  },

  methods: {
    showPickHandler(item) {
      if (item.arrow === false) return;
      if (item.type === "city") {
        this.showAreaPick = true;
        return;
      }
      this.columnList = item.list;
      this.show = true;
    },

    areaPickSubmit(data) {
      this.queryParams.tmi_prov_id = data.value[0].value;
      this.viewers.city = data.value[0].label;
      this.getList(true);
      this.showAreaPick = false;
    },

    viewFilter(item) {
      const label = this.viewers[item.key] || item.label;
      return label.length > 2 ? label.slice(0, 2) + "..." : label;
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  padding: 0 140rpx;
}

.filter {
  justify-content: space-between;

  &-item {
    padding: 12rpx 60rpx;
    background-color: #fafaff;
    border-radius: 40rpx;
  }
}

.card {
  &-item {
    &:not(:first-child) {
      margin-top: 40rpx;
    }
  }
}
</style>
